<script lang="ts" setup>
import { useRouter } from "vue-router";
import { storeToRefs } from "pinia";
import { watch, ref } from "vue";
import { userLocalStoriesStore } from "../../store";
import { UserStoreDataType } from "@/typing";

const userStore = userLocalStoriesStore();
const { isShowUser, isLogin } = storeToRefs(userStore);
const { updateIsShowUser, searchUserNow } = userStore

const router = useRouter();
const myUser = ref<UserStoreDataType>();

watch(() => isLogin.value, () => {
  updateIsShowUser(false);
  myUser.value = searchUserNow();
})

myUser.value = searchUserNow();

function goToMakeSubtotal(imgUrl: string, forward: string, wordsInfo: string) {
  router.push({
    name: 'make-subtotal',
    query: {
      imgUrl,
      forward,
      wordsInfo
    }
  })
}

function goToUserSetting() {
  updateIsShowUser(true);
  router.push({
    name: 'user-setting',
  })
}

function goToUserHp() {
  updateIsShowUser(true);
  router.push({
    name: 'user-hp',
  })
}

function goToUserArticle() {
  updateIsShowUser(true);
  router.push({
    name: 'user-article',
  })
}

function goToUserRadio() {
  updateIsShowUser(true);
  router.push({
    name: 'user-radio',
  })
}

function goToUserMusic() {
  updateIsShowUser(true);
  router.push({
    name: 'user-music',
  })
}

function goToUserFilm() {
  updateIsShowUser(true);
  router.push({
    name: 'user-film',
  })
}

function goToUserFocus() {
  updateIsShowUser(true);
  router.push({
    name: 'user-focus'
  })
}

</script>

<template>
  <div class=" bg-gray-50 ">
    <div v-show="!isShowUser" class="h-screen">
      <div class="bg-user w-screen text-white  p-5 relative">
        <img class="w-10  absolute right-8 top-5" src="@/assets/user/center_message.png" alt="img">

        <div class="flex items-center absolute bottom-12 ml-3">
          <img class="w-24 rounded-full border-2 border-white mr-8" src="@/assets/user/user.jpg" alt="img">
          <div class="text-2xl">{{ myUser?.userName }}</div>
        </div>
      </div>

      <div class="p-8 bg-white">
        <div class="flex justify-between">
          <span class="text-2xl">我的小记</span>
          <span class="text-gray-400">全部 &gt;</span>
        </div>

        <div @click="goToMakeSubtotal('img', '这一刻，你在想什么？', myUser?.userName || '')"
          class="text-gray-400 border-2 px-8 py-5 w-2/5 ml-44 my-5 text-center border-dashed rounded-2xl">
          <div class="flex items-center ml-3">
            <img class="w-7 h-7" src="../../assets/card/diary_icon.png" alt="share">
            <span class="text-2xl ml-3 ">制作小记</span>
          </div>
          <div class="font-small -ml-24">记录你此刻的想法</div>
        </div>

        <div>我的收藏</div>
        <div class="flex justify-around mt-5 text-center">
          <div @click="goToUserHp">
            <img class="w-14 h-16 mb-3" src="@/assets/user/indi_hp_icon.png" alt="img" />
            <div>图文</div>
          </div>
          <div @click="goToUserArticle">
            <img class="w-14 h-16 mb-3" src="@/assets/user/indi_article_icon.png" alt="img" />
            <div>文章</div>
          </div>
          <div @click="goToUserMusic">
            <img class="w-14 h-16 mb-3" src="@/assets/user/indi_music_icon.png" alt="img" />
            <div>音乐</div>
          </div>
          <div @click="goToUserFilm">
            <img class="w-14 h-16 mb-3" src="@/assets/user/indi_movie_icon.png" alt="img" />
            <div>影视</div>
          </div>
          <div @click="goToUserRadio">
            <img class="w-14 h-16 mb-3" src="@/assets/user/indi_radio_icon.png" alt="img" />
            <div>电台</div>
          </div>

        </div>
      </div>

      <div class="bg-white mt-5 pl-8">
        <div class="flex items-center text-gray-500" @click="goToUserFocus">
          <img class="w-8 h-8" src="@/assets/user/my_attention_icon.png" alt="img" />
          <div class="border-b py-5 flex items-center w-11/12">
            <div class=" ml-5  w-11/12 ">我的关注</div>
            <div>&gt;</div>
          </div>
        </div>

        <div class="flex items-center text-gray-500">
          <img class="w-8 h-8" src="@/assets/user/songlist_play_gray.png" alt="img" />
          <div class="border-b py-5 flex items-center w-11/12">
            <div class=" ml-5  w-11/12">歌单</div>
            <div>&gt;</div>
          </div>
        </div>

        <div class="flex items-center text-gray-500">
          <img class="w-8 h-8" src="@/assets/user/contribute_night.png" alt="img" />
          <div class="border-b py-5 flex items-center w-11/12">
            <div class=" ml-5  w-11/12">投稿</div>
            <div>&gt;</div>
          </div>
        </div>

        <div class="flex items-center text-gray-500" @click="goToUserSetting">
          <img class="w-12 h-12 -ml-2" src="@/assets/user/setting_white_icon.png" alt="img" />
          <div class="border-b py-5 flex items-center w-11/12">
            <div class=" ml-2  w-11/12">设置</div>
            <div>&gt;</div>
          </div>
        </div>
      </div>
    </div>

    <router-view v-slot="{ Component, route }">
      <transition name="slide-left">
        <component :is="Component" :key="route.path" />
      </transition>
    </router-view>
  </div>
</template>

<style>
.bg-user {
  height: 150px;
  background-image: url('@/assets/user/default_indi_bg.png');
  background-position: center;
  background-size: 450px;
  background-repeat: no-repeat;
}

.font-small {
  font-size: 20px;
  transform: scale(0.5);
  width: 200px;
}
</style>

